<template>
  <div class="app-container">
    <el-table ref="multipleTable" border v-loading="loading" :data="tableData" tooltip-effect="dark" max-height="600px" style="width: 100%">
      <el-table-column prop="id" label="日志编号" width="100" />
      <el-table-column prop="username" label="用户名" width="150" />
      <el-table-column prop="operate" label="具体操作" width="220" />
      <el-table-column prop="ip" label="ip地址" width="180" />
      <el-table-column prop="browser" label="浏览器" />
      <el-table-column prop="os" label="操作系统" />
      <el-table-column prop="opTime" label="操作时间" />
    </el-table>
  </div>
</template>

<script>
import { listLog } from '@/api/recordLog'

export default {
  name: 'Log',
  data() {
    return {
      tableData: [
        {
          id: 1,
          username: 'admin',
          operate: '登录系统',
          ip: '124.0.0.1',
          browser: 'chrome10',
          os: 'windows11',
          opTime: '2022-08-11 12:11'
        }
      ],
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      listLog().then(res => {
        this.tableData = res.data
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
